<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" width="150" height="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // 设置填充规则，fill()有两个值，一个是nonzero、另一个是evenodd
    // evenodd使用规则：
        // 1.在路径包围的区域中，随便找一点，向外发射一条射线，
        // 2.和所有围绕它的边相交，
        // 3.查看相交线的个数，如果为奇数，就填充，如果是偶数，就不填充。
    function draw () {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        ctx.arc(50, 50, 10, 0, Math.PI * 2, true);
        ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
        ctx.arc(50, 50, 40, 0, Math.PI * 2, true);
        ctx.fill("evenodd");
        // ctx.fill("nonzero"); // 默认值（非零环绕原则）
    }    
</script>
</body>
</html>